<template>
  <div class="login">
    <div class="login-form">
      <el-form
        ref="ruleFormRef"
        :model="LoginForm"
        :rules="rules"
        style="max-width: 460px"
      >
        <el-form-item>
          <h1 class="title">叩丁狼商品管理系统</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            type="text"
            placeholder="请输入账号"
            :prefix-icon="Avatar"
            class="icon"
            v-model="LoginForm.username"
            :input-style="inputStyle"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            class="icon"
            v-model="LoginForm.password"
            :input-style="inputStyle"
          />
        </el-form-item>
        <el-form-item>
          <el-button :auto-insert-space="true" @click="LoginFn">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FormRules } from "element-plus/es/tokens/form";
import { Avatar, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from "element-plus";
import * as http from "./api/http";
import { InternalRuleItem } from "async-validator/dist-types/interface";
import { useUserState } from "@/store/user";
import { useRouter } from 'vue-router';

// 定义路由跳转方法
const router = useRouter()
// 定义仓库
const userStaste = useUserState();
// 表单高度
const inputStyle = reactive({
  height: "50px",
});
// 表单数据
const LoginForm = reactive({
  username: "",
  password: "",
});
// 获取表单dom
let ruleFormRef = ref();
// 非空校验
function validatorFn(
  rule: InternalRuleItem,
  value: string | undefined,
  callback: (msg?: string) => void
) {
  console.log(rule.field);
  if (value === "") {
    callback(`${rule.field === "username" ? "账号" : "密码"}不能为空!`);
  } else {
    callback();
  }
}
// 登录事件
function LoginFn() {
  ruleFormRef.value
    .validate()
    .then(() => {
      http.admin
        .AdminLogin({
          username: LoginForm.username,
          password: LoginForm.password,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            localStorage.setItem("token", res.data.tokenHead + res.data.token);
              // 跳转index页面
              router.push('/index')
            ElMessage({
              message: "登录成功!",
              type: "success",
            });
          } else {
            ElMessage.error(res.message);
          }
        });
    })
    .catch(() => {
      ElMessage.error("内容不能为空!");
    });
}
const rules = reactive<FormRules>({
  // 绑定的事件   事件类型
  username: [{ validator: validatorFn, trigger: "blur" }],
  password: [{ validator: validatorFn, trigger: "blur" }],
});
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  color: #fff;
  background: #2d3a4b;

  .login-form {
    width: 420px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .title {
      width: 100%;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
    }
    .icon {
      font-size: 16px;
    }
  }
}
:deep(.el-input__wrapper) {
  background: #283443;
}
:deep(.el-button) {
  height: 40px;
  width: 100%;
  border: none;
  color: #fff;
  background: #409eff;
}
:deep(.el-icon) {
  color: #454545;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #454545 inset;
}
</style>
